<template>
		<van-nav-bar 
			v-if="showNavBar"
			class="com-nav-bar"
			:title="title"
			:left-text="leftText"
			:right-text="rightText"
			:left-arrow="leftArrow"
			:isWeChatHide="isWeChatHide"
			:fixed="fixed"
			:border="border"
			:z-index="zIndex"
			@click-left="clickLeft"
			@click-right="clickRight"
		/>
</template>
<script>
	import {
		NavBar
	} from 'vant'
	export default {
		name: 'nav-bar', // 头部返回栏的组件封装，用于判断统一判断是否在app等地方的展示，其实是对有赞的van-nav-bar的再次封装
		components: {
			[NavBar.name]: NavBar
		},
		props: {
			title: {
				type: String,
				default: document.title
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			leftArrow: {
				type: Boolean,
				default: false
			},
			isWeChatHide: {
				type: Boolean,
				default: true
			},
			fixed: {
				type: Boolean,
				default: false
			},
			border: {
				type: Boolean,
				default: true
			},
			zIndex: {
				type: Number,
				default: 1
			},
		},
		data () {
			return {
				showNavBar: !(this.$is_from_app || (this.$is_from_wx && this.isWeChatHide)), // 是否展示头部返回的，微信以及app隐藏
			}
		},
		methods: {
			clickLeft(val) { // 点击返回键的事件
				this.$emit("clickLeft", val)
			},
			clickRight(val) { // 点击右边的事件
				this.$emit("clickRight", val)
			}
		}
	}
</script>